<template>
	<div class="app-container templateWrapp">
		<!-- 头部导入 -->
		<div class="title">
			<div class="step1 "><span>①</span>基本信息<span></span>———</div>
			<div class="step2 active"><span>②</span>标书信息</div>
		</div>
		<div class="top1">
			<div class="left"><img src="@/assets/images/icon/leftIcon.png" alt="" srcset=""
					style="width: 15px;height: 14px;">标书信息</div>
			<div class="btnList">
				<el-button type="primary" size="mini" @click="selectTem">选用模版</el-button>
				<el-button type="primary" size="mini" @click="handleQuery2">重置标书</el-button>
				<el-button type="primary" size="mini" @click="handleQuery3" class="saveNew">保存为新的模版</el-button>
				<FileUpload @getFilesContent="getFilesContent" :limit="999999"></FileUpload>
			</div>
		</div>
		<!--编辑器和子素材  -->
		<el-row :gutter="20">
			<el-col :span="16">
				<div class="grid-content" v-if="content.length > 0">
					<div class="grid-content left-add-content">
						<div v-for="(i, index) in content" :key="index" class="editorItemBox">
							<div class="notice" :class="i.selectedMaterialId ? 'materialNotice' : 'editNotice'">
								<div>{{ i.selectedMaterialId ? `素材(${i.threeLevelMaterialName || ''})` : i.editorTitle ? i.editorTitle
									: '编辑' }}</div>
								<div class="noticebtn">
									<el-button type="warning" plain icon="el-icon-edit" size="mini" @click="saveItemInfo(index)"
										v-if="i.showEdit" round title="保存"></el-button>
									<el-button type="danger" plain icon="el-icon-delete" @click.stop="clearItem(i, index)" size="mini" round
										title="删除"></el-button>
									<el-button class="addMaterial" type="primary" plain size="mini"
										@click="openAddDialog(index)" round title="新增素材">新增素材</el-button>
									<el-button class="addEdit" type="primary" plain size="mini"
										@click="addItemInIndex(index)" round title="新增编辑">新增编辑</el-button>
								</div>
							</div>
							<div class="ediortAndAddBox">
								<div class="leftContent" @click.stop="editItem(i, index)" :class="{ activeItem: index === formIndex }">
									<div class="editShow" v-if="i.showEdit">
										<!-- <Editors v-model="content[index].content" width="100%" :min-height="192" /> -->
										<Editors v-model="content[index].content" @getContent="editorInput($event, index)" />
									</div>
									<div class="tempDiv" v-html="i.content" v-else @click="editItemShow(index)"></div>
								</div>
							</div>
							<div class="notice" :class="i.selectedMaterialId ? 'materialNotice' : 'editNotice'">
								<div class="noticebtn">
									<el-button type="warning" plain icon="el-icon-edit" size="mini" @click="saveItemInfo(index)"
										v-if="i.showEdit" round title="保存"></el-button>
									<el-button type="danger" plain icon="el-icon-delete" @click.stop="clearItem(i, index)" size="mini" round
										title="删除"></el-button>
									<el-button class="addMaterial" type="primary" plain size="mini"
										@click="openAddDialog(index)" round title="新增素材">新增素材</el-button>
									<el-button class="addEdit" type="primary" plain size="mini"
										@click="addItemInIndex(index)" round title="新增编辑">新增编辑</el-button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<el-button type="primary" plain size="small" @click="addItem" style="margin-top: 10px;">新增编辑</el-button>
				<div class="savaInfo" v-if="content.length > 0">
					<el-button type="primary" @click="saveMaterial">保存</el-button>
					<el-button type="warning" @click="handleQuery3">保存并发布</el-button>
					<el-button type="primary" @click="saveTemplate">保存并导出为word</el-button>
				</div>
				<div v-else style="color: #606266;text-align: center;">
					请选择右边的素材库或者选择对应的模板！！！
				</div>

			</el-col>

			<!-- 子素材库 -->
			<el-col :span="8">
				<div class="grid-content">
					<div class="top">
						<div class="left"><img src="@/assets/images/icon/leftIcon.png" alt="" srcset=""
								style="width: 15px;height: 14px;">子素材库</div>
					</div>
					<div class="list">
						<div class="item" v-for="(i, index) in dTotal" :key="index">
							<div class="title">{{ i.name }}</div>
							<div class="content" v-for="(sub, index1) in i.children" :key="index1">
								<div class="row">
									<div class="left">{{ sub.name }}</div>
									<div class="right">
										<el-popover placement="bottom" width="250" trigger="focus">
											<div class="searchList" v-if="searchInfoList.length > 0">
												<p class="showItem" v-for="selectInfo in searchInfoList" @click="handleSelect(selectInfo)">
													{{ selectInfo.name }}
												</p>
												<el-pagination small layout="prev, pager, next" v-show="total > 0" :total="total"
													:page.sync="queryParams.params.pageNum" :limit.sync="queryParams.params.pageSize"
													@pagination="getMaterial" :pager-count="5">
												</el-pagination>
											</div>
											<div v-else class="showLoadingTitle">
												{{ showLoadingTitle ? '搜索中，请稍等' : '暂无数据' }}
											</div>
											<el-input placeholder="请输入内容" slot="reference" v-model="i.children[index1].remark"
												@focus="changeItem(sub, i.children[index1].remark)"
												@input="changeItem(sub, i.children[index1].remark)"></el-input>
										</el-popover>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="savaInfo">
						<el-button type="primary" @click="saveMaterial">保存</el-button>
						<el-button type="warning" @click="handleQuery3">保存并发布</el-button>
						<el-button type="primary" @click="saveTemplate">保存并导出为word</el-button>
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- 选用模板 -->
		<el-dialog title="模板库" :visible.sync="dialogFormVisible" width="60%">
			<el-form :model="search" ref="queryForm" size="small" :inline="true" label-width="100px">
				<el-form-item label="请输入名称搜索：" prop="ipaddr" label-width="130px">
					<el-input v-model="search.name" placeholder="名称搜索" clearable @keyup.enter.native="handleQuery" />
				</el-form-item>
				<el-form-item label="人员：" prop="userName">
					<el-select v-model="search.createBy" placeholder="选择人员">
						<el-option :label="i.nickName" :value="i.userId" v-for="i in userList"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="模板类型" :label-width="formLabelWidth" label-position="left">
					<el-select v-model="search.templateTypeId" placeholder="类型：" style="width: 100%;">
						<el-option :label="i.name" :value="i.templateTypeId" v-for="i in typeList"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
					<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="list.slice((pageNum - 1) * pageSize, pageNum * pageSize)" style="width: 100%" highlight-current-row
				@current-change="handleCurrentChange">
				<el-table-column prop="name" label="模版名称" width="180">
				</el-table-column>
				<el-table-column prop="templateTypeName" label="模版类型" width="180">
				</el-table-column>
				<el-table-column prop="affiliationName" label="隶属人员">
				</el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer footer1">
				<pagination v-show="total > 0" :total="total" :page.sync="search.pageNum" :limit.sync="search.pageSize"
					@pagination="getList" />
				<div>
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="selectRow">确 定</el-button>
				</div>
			</div>
		</el-dialog>
		<!-- 保存为新的模板 -->
		<el-dialog title="新增模板" :visible.sync="dialogFormVisible1" width="30%" center>
			<el-form :model="form">
				<el-form-item label="模板名称" :label-width="formLabelWidth" label-position="left">
					<el-input v-model="form1.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="模板类型" :label-width="formLabelWidth" label-position="left">
					<el-select v-model="form1.parentId" placeholder="类型：" style="width: 100%;">
						<el-option :label="i.name" :value="i" v-for="i in typeList"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<div class="left"></div>
				<div class="right"> <el-button @click="dialogFormVisible1 = false">取 消</el-button>
					<el-button type="primary" @click="insertTemplate">确 定</el-button>
				</div>
			</div>
		</el-dialog>
		<!-- 新增素材对话框 -->
		<el-dialog title="提示" :visible.sync="addIsOpen" width="30%">
			<div class="grid-content" v-if="addIsOpen">
				<div class="top">
					<div class="left"><img src="@/assets/images/icon/leftIcon.png" alt="" srcset=""
							style="width: 15px;height: 14px;">子素材库</div>
				</div>
				<div class="list">
					<div class="item" v-for="(i, index) in dTotal" :key="index">
						<div class="title">{{ i.name }}</div>
						<div class="content" v-for="(sub, index1) in i.children" :key="index1">
							<div class="row">
								<div class="left">{{ sub.name }}</div>
								<div class="right">
									<el-popover placement="bottom" width="250" trigger="focus">
										<div class="searchList" v-if="searchInfoList.length > 0">
											<p class="showItem" v-for="selectInfo in searchInfoList" @click="addHandleSelect(selectInfo)">
												{{ selectInfo.name }}
											</p>
											<el-pagination small layout="prev, pager, next" v-show="total > 0" :total="total"
												:page.sync="queryParams.params.pageNum" :limit.sync="queryParams.params.pageSize"
												@pagination="getMaterial" :pager-count="5">
											</el-pagination>
										</div>
										<div v-else class="showLoadingTitle">
											{{ showLoadingTitle ? '搜索中，请稍等' : '暂无数据' }}
										</div>
										<el-input placeholder="请输入内容" slot="reference" v-model="i.children[index1].remark"
											@focus="changeItem(sub, i.children[index1].remark)"
											@input="changeItem(sub, i.children[index1].remark)"></el-input>
									</el-popover>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- <span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span> -->
		</el-dialog>
	</div>
</template>
<script>
// import * as mammoth from 'mammoth'
var mammoth = require("mammoth/mammoth.browser");
import { listType, list, getUser, materialSearch } from "@/api/template/template";
import { getTemplates, saveMaterial, saveWord, getTemplatesInfo, saveNewtemplate } from "@/api/task/task";
// import Editors from '@/components/Wangeditor/editor';
import Editors from '@/components/ckeditor/index.vue';
import { Message } from 'element-ui'
import { getToken } from "@/utils/auth";
import debounce from '@/utils/debounce'
import ret from "mammoth/mammoth.browser";
const debounceGetSearch = debounce(materialSearch, 500)
export default {
	components: {
		Editors
	},
	data() {
		return {
			addIsOpen: false,
			formIndex: '',
			userList: [],
			showLoadingTitle: true,
			// 总条数
			total: 0,
			// 查询参数
			queryParams: {
				"name": "",
				"params": {
					"pageSize": 10,
					"pageNum": 1
				},
				"parentId": ""
			},
			searchInfoList: [],
			wordHtml: '',
			// 标书导入参数
			upload: {
				// 是否显示弹出层（标书导入）
				open: false,
				// 弹出层标题（标书导入）
				title: "",
				// 是否禁用上传
				isUploading: false,
				// 是否更新已经存在的用户数据
				updateSupport: 0,
				// 设置上传的请求头部
				headers: { Authorization: "Bearer " + getToken() },
				// 上传的地址
				url: process.env.VUE_APP_BASE_API + "/system/user/importData"
			},
			dialogFormVisible1: false,
			form1: {
				"parentId": "",
				"name": ""
			},
			templateName: '',
			materialId: '',
			dTotal: [],//素材库列表
			// 表单参数
			form: {
				noticeContent: '<span>html标签在渲染的时候被源码输出1212</span>'
			},
			// 弹出层标题
			title: "详情",
			open: false,
			// content: [{
			//   content: "<span>html标签在渲染的时候被源码输出</span>",
			//   selectedMaterialId:''
			// }],
			state1: '',
			resorceArr: [],
			restaurants: [
			],
			templateId: '',//查询的模板id
			ids: [],//保存修改的内容
			focusMaterialId: '',//焦点的id
			content: [],
			selectInfo: {
				name: '',
				templateId: ''
			},
			// 表单参数
			dialogFormVisible: false,
			search: {
				templateTypeId: '',
				createBy: '',
				name: '',
				pageNum: 1,
				pageSize: 10,
			},
			infolist: [{ name: '选项内容' }],
			formLabelWidth: '100px',
			// 遮罩层
			loading: true,
			// 总条数
			total: 0,
			// 表格数据
			list: [],
			pageNum: 1,
			pageSize: 10,
			userParams: {
				pageNum: 1,
				pageSize: 10,
			},
			typeList: [],
			editorTitle: '编辑'
		};
	},
	created() {
		this.getList();
		this.getUser()
		this.searchType()//获取模板类型
		let id = this.$route.query.tenderId
		this.templateName = this.$route.query.projectName
		this.templateId = id;
		// console.log(id, 'templateId')
		this.getDetails()
	},
	methods: {
		//获取文字
		getChinese(strValue) {
			// console.log(strValue,'============================================');
			if (strValue !== null && strValue !== '') {
				const reg = /[\u4e00-\u9fa5]/g;
				if (strValue.match(reg)?.join('')?.substring(0, 8)) {
					return strValue.match(reg)?.join('')?.substring(0, 8);
				}
				return '编辑'
			}
			return '编辑';
		},
		//获取编辑框的值
		editorInput(value, index) {
			// console.log('value', value, index);
			this.content[index].content = value;

		},
		/**弹窗子素材下拉框选中添加*/
		addHandleSelect(item) {
			let isSelect = this.ids.includes(item.materialId)
			console.log('isSelect', isSelect);
			if (!isSelect) {//没有选中 的时候就添加进去
				this.ids.push(item.materialId)
				const addData = {
					content: item.content,
					selectedMaterialId: item.materialId,
					threeLevelMaterialName: item.name
				};
				this.content.splice(this.addIndex, 0, addData);
			} else {
				Message({ message: '您已添加该素材', type: 'error' })
			}
			for (let k in this.dTotal) {
				for (let m in this.dTotal[k].children) {
					if (this.dTotal[k].children[m].materialId == this.focusMaterialId) {//选中的时候复制给需要的id
						this.dTotal[k].children[m].selectedMaterialId = item.materialId
						this.dTotal[k].children[m].threeLevelMaterialName = item.name
						this.dTotal[k].children[m].remark = null//单纯的将弹框关闭
					}
				}
			}
			console.log(this.dTotal, 'this.dTotal');
			this.addIsOpen = false;
		},
		/**在指定位置添加编辑框 */
		addItemInIndex(index) {
			this.addIndex = index + 1;
			const addContent = {
				content: '',//富文本的内容
				selectedMaterialId: ''
			};
			this.content.splice(this.addIndex, 0, addContent)
		},
		/**打开新增素材对话框 */
		openAddDialog(index) {
			console.log(index);
			this.addIsOpen = true;
			this.addIndex = index + 1;
			console.log('新增下表', this.addIndex);
		},
		editItemShow(i) {
			this.content.forEach((item, index) => {
				// 当没有selectedMaterialId的时候方可编辑
				item.showEdit = index == i && !item.selectedMaterialId
			})
		},
		editItem(row, index) {
			if (this.formIndex === '') { //重复点的实时就取消默认选择
				this.formIndex = index;
			} else {
				this.formIndex = ''
			}
			//根据是否有selectedMaterialId判断是否从素材中获取的
			if (row.selectedMaterialId) return Message({ message: '这是素材内容，不能编辑', type: 'error' })
			this.form = Object.assign({}, row);
		},
		addItem() {
			this.formIndex = '';
			this.content.push(
				{
					selectedMaterialId: '',
					content: '',
					threeLevelMaterialName: '',
					editContent: '',
					showEdit: false,
				}
			)
		},
		saveItemInfo(index) {
			this.content[index].editorTitle = this.getChinese(this.content[index]?.content);
			this.content.forEach((item, index) => {
				item.showEdit = false
			})
			this.formIndex = '';//此时清除所选的下标
		},
		/**上传文件结束 */
		getFilesContent(e) {
			console.log(e, '上传文件');
			this.content.push({
				content: e,//富文本的内容
				selectedMaterialId: '',
				threeLevelMaterialName: '',
				editorTitle: this.getChinese(e)
			})
		},
		submitForm() {

		},
		cancel() {

		},
		async getMaterial() {
			// let res = await materialSearch(this.queryParams)
			// this.searchInfoList = res.rows
			// this.total = res.total
			debounceGetSearch(this.queryParams).then(res => {
				this.searchInfoList = res.rows
				this.total = res.total
				this.showLoadingTitle = false
				console.log(this.searchInfoList, 'this.searchInfoList')
			})
			// console.log(res, 888)
		},
		changeItem(sub, name) {
			this.showLoadingTitle = true
			this.searchInfoList = []
			this.queryParams.name = name;
			this.queryParams.parentId = sub.materialId;
			this.focusMaterialId = sub.materialId//焦点的id
			this.getMaterial()
		},
		showResult(result) {
			console.log(result);
			let html = result.value;
			console.log(html)
			// console.log(html);
			// // 将解析出来的dom元素的展示替换成自己想要的样子
			let newHTML = html
			this.wordHtml = newHTML
		},
		handleBeforeUpload(file) {
			const reader = new FileReader()
			reader.readAsArrayBuffer(file)
			reader.onload = e => {
				const data = reader.result
				mammoth.convertToHtml({ arrayBuffer: data }).then(r => {
					// this.wordHtml = r.value
					// console.log(this.wordHtml)
					// this.showResult(r.value)
				})
			}

		},
		handlePreview(file, fileList) {
			console.log(file, fileList);
		},
		/** 导入按钮操作 */
		handleImport() {
			this.upload.title = "标书导入";
			this.upload.open = true;
		},
		// 文件上传中处理
		handleFileUploadProgress(event, file, fileList) {
			console.log(file, fileList)
			this.upload.isUploading = true;
		},

		// 文件上传成功处理
		handleFileSuccess(response, file, fileList) {
			this.upload.open = false;
			this.upload.isUploading = false;
			this.$refs.upload.clearFiles();
			this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
			this.getList();
		},
		// 提交上传文件
		submitFileForm() {
			this.$refs.upload.submit();
		},
		async insertTemplate() {
			let info = this.content.map(item => {
				return {
					content: item.content,
					threeLevelMaterialId: item.selectedMaterialId
				}
			})
			let data = {
				templateTypeId: this.form1.parentId.templateTypeId,
				name: this.form1.name,
				list: info
			}
			// console.log(data, 'data')
			let res = await saveNewtemplate(data)
			Message({ message: '添加成功', type: 'success' })
			this.dialogFormVisible1 = false
		},
		handleQuery3() {
			this.dialogFormVisible1 = true
		},
		handleQuery2() {
			this.$modal.confirm('是否重置标书信息').then(() => {
				this.content = []
				this.saveMaterial()
			})
		},
		handleCurrentChange(row) {
			this.selectInfo = row
		},
		selectRow() {
			if (!this.selectInfo || this.selectInfo.templateId == '') {
				Message({ message: '请鼠标移动到对应的模板选择！', type: 'error' })
				return
			}
			this.$modal.confirm('是否选择名称为' + this.selectInfo.name + '的模板').then(async () => {
				return getTemplatesInfo({ templateId: this.selectInfo.templateId });
			}).then((response) => {
				console.log(response, 'response')
				//每次都清空
				this.content = []
				this.ids = []
				this.dTotal = response.data.materialTree;
				this.content = response.data.materialToTemplateDto.list.map(item => {
					return {
						selectedMaterialId: item.threeLevelMaterialId,
						content: item.content,
						editorTitle: response.data.name
					}
				})
				this.ids = response.data.materialToTemplateDto.list.map(item => {
					return item.threeLevelMaterialId
				})
				this.dialogFormVisible = false;
			}).catch(() => { });
		},
		async saveTemplate() {
			this.saveMaterial()
			let str = ''
			this.content.map((item) => {
				str += item.content
			})
			let res = await saveWord({ template: str })
			let blob = new Blob([res.data], {
				type: `application/msword` //word文档为msword,pdf文档为pdf
			});
			let objectUrl = URL.createObjectURL(blob);
			let link = document.createElement("a");
			let fname = decodeURI(res.headers["content-disposition"].split("filename=")[1]); //下载文件的名字
			link.href = objectUrl;
			link.setAttribute("download", fname);
			document.body.appendChild(link);
			link.click();
		},
		saveMaterial() {
			setTimeout(() => {
				let info = this.content.map(item => {
					return {
						content: item.content,
						threeLevelMaterialId: item.selectedMaterialId
					}
				})
				let data = {
					list: info,
					templateId: this.templateId,
				}
				saveMaterial(data).then(res=>{
					Message({ message: '保存成功', type: 'success' })
				})
			}, 0);
		},
		clearItem(e, index) {
			this.content.splice(index, 1)
			for (let i = 0; i < this.ids.length; i++) { //删除id
				//先判断是否为空字符串
				if (e.selectedMaterialId) {
					//不是空字符串，判断ids是否存在，存在则删除
					if (this.ids.includes(e.selectedMaterialId)) {
						// 判断 id 为 4 的对象是否存在，
						this.ids = this.ids.filter(item => item != e.selectedMaterialId); // 存在即删除
					}
				}
			}
		},
		async getDetails() {
			//每次都清空
			this.content = []
			this.ids = []
			let response = await getTemplates({ templateId: this.templateId })
			this.dTotal = response.data.materialTree;
			this.content = response.data.materialToTemplateDto.list.map(item => {
				return {
					selectedMaterialId: item.threeLevelMaterialId,
					content: item.content
				}
			})
			this.ids = response.data.materialToTemplateDto.list.map(item => {
				return item.threeLevelMaterialId
			})
			this.content.forEach((item, index) => {
				this.content[index].editorTitle = this.getChinese(item.content);
			})
			console.log(this.content, 'this.content', this.ids)
		},
		handleSelect(item) {
			console.log(item);
			let isSelect = this.ids.includes(item.materialId)
			if (!isSelect) {//没有选中 的时候就添加进去
				this.ids.push(item.materialId)
				this.content.push({
					content: item.content,
					selectedMaterialId: item.materialId,
					threeLevelMaterialName: item.name
				})
			} else {
				Message({ message: '您已添加该素材', type: 'error' })
			}
			for (let k in this.dTotal) {
				for (let m in this.dTotal[k].children) {
					if (this.dTotal[k].children[m].materialId == this.focusMaterialId) {//选中的时候复制给需要的id
						this.dTotal[k].children[m].selectedMaterialId = item.materialId
						this.dTotal[k].children[m].remark = null//单纯的将弹框关闭
					}
				}
			}
		},
		filterChildren() {
			for (let k in this.dTotal) {
				for (let m in this.dTotal[k].children) {
					if (this.dTotal[k].children[m].materialId == this.focusMaterialId) {
						this.resorceArr = this.dTotal[k].children[m].children
					}
				}
			}
			// console.log(this.resorceArr, 'this.resorceArr')
		},
		changeInput(e, value) {
			console.log(value)
			this.focusMaterialId = e.materialId//焦点的id
			this.filterChildren()
			// console.log(111, e)
		},
		querySearch(queryString, cb) {
			// console.log(222)
			var restaurants = this.resorceArr;
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
			cb(results);
		},
		createFilter(queryString) {
			return (restaurant) => {
				return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
			};
		},



		/** 搜索按钮操作 */
		handleQuery() {
			this.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},
		selectTem() {
			this.dialogFormVisible = true;

		},
		/** 查询登录日志列表 */
		getList() {
			this.loading = true;
			list(this.search).then(response => {
				this.list = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.search.name = '';
			this.search.createBy = '';
			this.search.templateTypeId = '';
			this.search.pageNum = 1;
			this.resetForm("queryForm");
			this.handleQuery();
			this.getList();
		},
		async getUser() {
			let res = await getUser(this.userParams)
			this.userList = res.data
			console.log(this.userList, 'getUser')
		},
		async searchType() {
			let res = await listType({ name: '' })
			this.typeList = res.rows
			console.log(this.typeList, 11)
		},
	}
};
</script>
<style scoped lang="scss">
.title {
	display: flex;
	color: #A9A9AA;

	.active {
		color: #157DFA;
	}

	.step1 {
		margin-right: 10px;
	}

	span {
		margin-right: 8px;
	}
}

.showLoadingTitle {
	color: #333;
	text-align: center;
	font-size: 14px;
}

.searchList p:hover {
	background: #f8f7f7 !important;
	cursor: pointer !important;
}

.top1 {
	display: flex;
	// justify-content: space-between;
	align-items: center;
	color: #333;
	margin: 15px 0;

	.left {
		img {
			margin-right: 10px;
		}
	}

	.right {}

	.btnList {
		margin-left: 100px;
		margin-top: 10px;
		display: flex;
		align-items: flex-start;

		.saveNew {
			margin-right: 10px;
		}
	}
}

.savaInfo {
	margin-top: 20px;
}

::v-deep .el-dialog__wrapper {
	left: -6% !important;
}

.list {
	display: flex;
	flex-direction: column;

	.item {
		.title {
			color: #F9B37D;
			font-family: PingFang SC;
			font-size: 14px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}

		.content {
			margin-top: 15px;
			color: #333;
			font-family: PingFang SC;
			font-size: 14px;

			.row {
				margin-top: 15px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					width: 35%;
				}

				.right {
					width: 65%;
				}
			}
		}
	}
}

.top {
	display: flex;
	justify-content: space-between;
	color: #333;
	margin: 0 0 15px 0;

	.left {
		img {
			margin-right: 10px;
		}
	}

	.right {}
}

.footer1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

::v-deep .pagination-container {
	width: 360px;
}

::v-deep .el-pagination {
	position: relative !important;
}

.savaInfo {
	margin-top: 20px;
}

.list {
	display: flex;
	flex-direction: column;

	.item {
		margin-top: 10px;

		.title {
			color: #F9B37D;
			font-family: PingFang SC;
			font-size: 14px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}

		.content {
			margin-top: 15px;
			color: #333;
			font-family: PingFang SC;
			font-size: 14px;

			.row {
				margin-top: 15px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {}

				.right {
					width: 80%;
					display: flex;
					align-items: center;

					.close {
						font-size: 22px;
						margin-left: 10px;
						cursor: pointer;
					}
				}
			}
		}
	}
}

.top {
	display: flex;
	justify-content: space-between;
	color: #333;
	margin: 0 0 15px 0;

	.left {
		img {
			margin-right: 10px;
		}
	}

	.right {}
}

.ediortAndAddBox {
	display: flex;
}

::v-deep .el-dialog__wrapper {
	left: -6% !important;
}

.activeItem {
	border: 1px solid #F9B37D !important;
}

.searchList p:hover {
	background: #f8f7f7 !important;
	cursor: pointer !important;
}

.savaInfo {
	margin-top: 20px;
}

.showLoadingTitle {
	color: #333;
	text-align: center;
	font-size: 14px;
}

.left-add-content {
	border-radius: 6px;
	border: 1px solid #F0F1F5;
	padding: 10px;
	min-height: 200px;
	padding-bottom: 50px;
}

.leftContent {
	min-height: 150px;
	width: 100%;
	cursor: pointer;
	position: relative;
	border: 1px solid #ccc;
	display: flex;

	.close {
		position: absolute;
		top: 10px;
		cursor: pointer;
		right: 10px;
	}

	.tempDiv {
		padding-left: 10px;
		flex: 1;

		table {
			border: 1px solid #ccc !important;
		}
	}

	.editShow {
		flex: 1;
		width: 100%;
	}
}

.empty-content {
	height: 100%;
	width: 100%;
	cursor: pointer;
}

.list {
	display: flex;
	flex-direction: column;

	.item {
		margin-top: 10px;

		.title {
			color: #F9B37D;
			font-family: PingFang SC;
			font-size: 14px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
			text-align: left;
		}

		.content {
			margin-top: 15px;
			color: #333;
			font-family: PingFang SC;
			font-size: 14px;

			.row {
				margin-top: 15px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					width: 35%;
				}

				.right {
					width: 65%;
					display: flex;
					align-items: center;

					.searchList {
						p {
							&:hover {
								background: #f8f7f7;
								cursor: pointer;
							}
						}
					}

					.close {
						font-size: 22px;
						margin-left: 10px;
						cursor: pointer;
					}
				}
			}
		}
	}
}

.top {
	display: flex;
	justify-content: space-between;
	color: #333;
	margin: 0 0 15px 0;

	.left {
		img {
			margin-right: 10px;
		}
	}

	.right {}


}

.notice {
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.materialNotice {
	background-color: #ffeded;
}

.editNotice {
	background-color: #e8f4ff;
}

.noticebtn {
	position: absolute;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.editorItemBox {
	margin-bottom: 10px;
	overflow-x: auto;
}

::v-deep td,
::v-deep th {
	border: 1px solid #ccc;
	min-width: 50px;
	height: 20px;
}
</style>
